<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Load SuperMap WMTS Layer - ArcGIS API for JavaScript 3.15</title>

    <!-- Load ArcGIS API 3.15 CSS -->
    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
    <style>
        html,
        body,
        #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <!-- Load ArcGIS API 3.15 JavaScript -->
    <script src="https://js.arcgis.com/3.15/init.js"></script>
    <script>
        var map;



        require([
            "esri/map",
            "esri/layers/WMTSLayer",
            "esri/layers/WMTSLayerInfo",
            "esri/geometry/Extent",
            "esri/layers/TileInfo",
            "esri/SpatialReference",
            "dojo/parser",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function (
            Map,
            WMTSLayer,
            WMTSLayerInfo,
            Extent,
            TileInfo,
            SpatialReference,
            parser
        ) {
            parser.parse();

            // 设置代理 URL
            esriConfig.defaults.io.proxyUrl = "/proxy/";

            // 如果有启用 CORS 的服务器，添加到 corsEnabledServers
            esriConfig.defaults.io.corsEnabledServers.push("iserver.supermap.io");

            var map = new Map("mapDiv", {
                center: [116.4, 39.9], // 北京的经纬度
                zoom: 7,
            });

            var tileInfo = new TileInfo({
                "dpi": 90.714285714,
                "format": "image/png",
                "compressionQuality": 0,
                "spatialReference": new SpatialReference({
                    "wkid": 4326
                }),
                "rows": 256,
                "cols": 256,
                "origin": {
                    "x": -180,
                    "y": 90
                },
                "lods": [{
                    "level": "0", "scale": 5.0E8, "resolution": 1.25764139776733
                }, {
                    "level": "1", "scale": 2.5E8, "resolution": 0.628820698883665
                }, {
                    "level": "2", "scale": 1.0E8, "resolution": 0.251528279553466
                }, {
                    "level": "3", "scale": 5.0E7, "resolution": 0.125764139776733
                }, {
                    "level": "4", "scale": 2.5E7, "resolution": 0.0628820698883665
                }, {
                    "level": "5", "scale": 1.0E7, "resolution": 0.0251528279553466
                }, {
                    "level": "6", "scale": 5000000.0, "resolution": 0.0125764139776733
                }, {
                    "level": "7", "scale": 2500000.0, "resolution": 0.00628820698883665
                }, {
                    "level": "8", "scale": 1000000.0, "resolution": 0.00251528279553466
                }, {
                    "level": "9", "scale": 500000.0, "resolution": 0.00125764139776733
                }, {
                    "level": "10", "scale": 250000.0, "resolution": 6.28820698883665E-4
                }, {
                    "level": "11", "scale": 100000.0, "resolution": 2.51528279553466E-4
                }, {
                    "level": "12", "scale": 50000.0, "resolution": 1.25764139776733E-4
                }, {
                    "level": "13", "scale": 25000.0, "resolution": 6.28820698883665E-5
                }, {
                    "level": "14", "scale": 10000.0, "resolution": 2.51528279553466E-5
                }, {
                    "level": "15", "scale": 5000.0, "resolution": 1.25764139776733E-5
                }, {
                    "level": "16", "scale": 2500.0, "resolution": 6.28820698883665E-6
                }, {
                    "level": "17", "scale": 1000.0, "resolution": 2.51528279553466E-6
                }, {
                    "level": "18", "scale": 500.0, "resolution": 1.25764139776733E-6
                }, {
                    "level": "19", "scale": 250.0, "resolution": 6.28820698883665E-7
                }, {
                    "level": "20", "scale": 100.0, "resolution": 2.51528279553466E-7
                }]
            });
            var tileExtent = new Extent(-180.0, -90, 180.0, 90, new SpatialReference({
                wkid: 4326
            }));

            var layerInfo = new WMTSLayerInfo({
                tileInfo: tileInfo,
                fullExtent: tileExtent,
                initialExtent: tileExtent,
                identifier: "China_4326",
                tileMatrixSet: "GlobalCRS84Scale_China_4326",
                format: "image/png",
                style: "default"
            });

            var resourceInfo = {
                version: "1.0.0",
                layerInfos: [layerInfo],
                copyright: "超图"
            };

            var options = {
                serviceMode: "KVP",
                resourceInfo: resourceInfo,
                layerInfo: layerInfo
            };
            let wmtsLayer = new WMTSLayer("https://iserver.supermap.io/iserver/services/map-china400/wmts100", options);

            map.addLayer(wmtsLayer);

        })

    </script>
</head>

<body>
    <div id="mapDiv"></div>
</body>

</html>